റിയാക്ട് ടെസ്റ്റിംഗ് ലൈബ്രറി: ഒരു സമഗ്ര ഗൈഡ്

ഇന്നത്തെ അതിവേഗ വെബ് ഡെവലപ്‌മെൻ്റ് രംഗത്ത്, നിങ്ങളുടെ റിയാക്ട് ആപ്ലിക്കേഷനുകളുടെ ഗുണനിലവാരവും വിശ്വാസ്യതയും ഉറപ്പാക്കുന്നത് പരമപ്രധാനമാണ്. ഉപയോക്താവിൻ്റെ കാഴ്ചപ്പാടിൽ ശ്രദ്ധ കേന്ദ്രീകരിക്കുന്ന ടെസ്റ്റുകൾ എഴുതുന്നതിനുള്ള ഒരു ജനപ്രിയവും ഫലപ്രദവുമായ പരിഹാരമായി റിയാക്ട് ടെസ്റ്റിംഗ് ലൈബ്രറി (RTL) ഉയർന്നുവന്നിട്ടുണ്ട്. ഈ ഗൈഡ് RTL-ൻ്റെ ഒരു പൂർണ്ണമായ അവലോകനം നൽകുന്നു, അടിസ്ഥാന ആശയങ്ങൾ മുതൽ നൂതന സാങ്കേതിക വിദ്യകൾ വരെ ഇതിൽ ഉൾക്കൊള്ളുന്നു, ഇത് ശക്തവും പരിപാലിക്കാൻ കഴിയുന്നതുമായ റിയാക്ട് ആപ്ലിക്കേഷനുകൾ നിർമ്മിക്കാൻ നിങ്ങളെ പ്രാപ്തരാക്കുന്നു.

എന്തുകൊണ്ട് റിയാക്ട് ടെസ്റ്റിംഗ് ലൈബ്രറി തിരഞ്ഞെടുക്കണം?

പരമ്പരാഗത ടെസ്റ്റിംഗ് രീതികൾ പലപ്പോഴും ഇമ്പ്ലിമെൻ്റേഷൻ വിശദാംശങ്ങളെ ആശ്രയിക്കുന്നു, ഇത് ചെറിയ കോഡ് മാറ്റങ്ങളിൽ പോലും ടെസ്റ്റുകൾ പരാജയപ്പെടാൻ കാരണമാകുന്നു. എന്നാൽ RTL, ഒരു ഉപയോക്താവ് കമ്പോണന്റുകളുമായി എങ്ങനെ ഇടപഴകുന്നു എന്നതിനെ അടിസ്ഥാനമാക്കി ടെസ്റ്റ് ചെയ്യാൻ പ്രോത്സാഹിപ്പിക്കുന്നു. ഉപയോക്താവ് കാണുന്നതും അനുഭവിക്കുന്നതും ആയ കാര്യങ്ങളിൽ ശ്രദ്ധ കേന്ദ്രീകരിക്കുന്ന ഈ സമീപനം നിരവധി പ്രധാന നേട്ടങ്ങൾ നൽകുന്നു:

• ഉപയോക്തൃ കേന്ദ്രീകൃത ടെസ്റ്റിംഗ്: RTL ഉപയോക്താവിൻ്റെ കാഴ്ചപ്പാടിനെ പ്രതിഫലിപ്പിക്കുന്ന ടെസ്റ്റുകൾ എഴുതാൻ പ്രോത്സാഹിപ്പിക്കുന്നു, ഇത് നിങ്ങളുടെ ആപ്ലിക്കേഷൻ അന്തിമ ഉപയോക്താവിൻ്റെ കാഴ്ചപ്പാടിൽ നിന്ന് പ്രതീക്ഷിച്ചപോലെ പ്രവർത്തിക്കുന്നുവെന്ന് ഉറപ്പാക്കുന്നു.
• ടെസ്റ്റ് ബലഹീനത കുറയ്ക്കുന്നു: ഇമ്പ്ലിമെൻ്റേഷൻ വിശദാംശങ്ങൾ ടെസ്റ്റ് ചെയ്യുന്നത് ഒഴിവാക്കുന്നതിലൂടെ, നിങ്ങൾ കോഡ് റീഫാക്ടർ ചെയ്യുമ്പോൾ RTL ടെസ്റ്റുകൾ പരാജയപ്പെടാനുള്ള സാധ്യത കുറവാണ്. ഇത് കൂടുതൽ പരിപാലിക്കാൻ കഴിയുന്നതും ശക്തവുമായ ടെസ്റ്റുകളിലേക്ക് നയിക്കുന്നു.
• മെച്ചപ്പെട്ട കോഡ് ഡിസൈൻ: എളുപ്പത്തിൽ ആക്സസ് ചെയ്യാവുന്നതും ഉപയോഗിക്കാൻ എളുപ്പമുള്ളതുമായ കമ്പോണന്റുകൾ എഴുതാൻ RTL നിങ്ങളെ പ്രോത്സാഹിപ്പിക്കുന്നു, ഇത് മൊത്തത്തിൽ മികച്ച കോഡ് ഡിസൈനിലേക്ക് നയിക്കുന്നു.
• അക്സെസ്സിബിലിറ്റിയിൽ ശ്രദ്ധ കേന്ദ്രീകരിക്കുന്നു: RTL നിങ്ങളുടെ കമ്പോണന്റുകളുടെ അക്സെസ്സിബിലിറ്റി ടെസ്റ്റ് ചെയ്യുന്നത് എളുപ്പമാക്കുന്നു, ഇത് നിങ്ങളുടെ ആപ്ലിക്കേഷൻ എല്ലാവർക്കും ഉപയോഗയോഗ്യമാണെന്ന് ഉറപ്പാക്കുന്നു.
• ലളിതമായ ടെസ്റ്റിംഗ് പ്രക്രിയ: RTL ലളിതവും അവബോധജന്യവുമായ ഒരു API നൽകുന്നു, ഇത് ടെസ്റ്റുകൾ എഴുതുന്നതും പരിപാലിക്കുന്നതും എളുപ്പമാക്കുന്നു.

നിങ്ങളുടെ ടെസ്റ്റിംഗ് എൻവയോൺമെൻ്റ് സജ്ജീകരിക്കുന്നു

നിങ്ങൾക്ക് RTL ഉപയോഗിക്കാൻ തുടങ്ങുന്നതിനുമുമ്പ്, നിങ്ങളുടെ ടെസ്റ്റിംഗ് എൻവയോൺമെൻ്റ് സജ്ജീകരിക്കേണ്ടതുണ്ട്. ഇതിൽ സാധാരണയായി ആവശ്യമായ ഡിപൻഡൻസികൾ ഇൻസ്റ്റാൾ ചെയ്യുന്നതും നിങ്ങളുടെ ടെസ്റ്റിംഗ് ഫ്രെയിംവർക്ക് കോൺഫിഗർ ചെയ്യുന്നതും ഉൾപ്പെടുന്നു.

ആവശ്യമായവ

• Node.js, npm (അല്ലെങ്കിൽ yarn): നിങ്ങളുടെ സിസ്റ്റത്തിൽ Node.js, npm (അല്ലെങ്കിൽ yarn) ഇൻസ്റ്റാൾ ചെയ്തിട്ടുണ്ടെന്ന് ഉറപ്പാക്കുക. ഔദ്യോഗിക Node.js വെബ്സൈറ്റിൽ നിന്ന് നിങ്ങൾക്ക് അവ ഡൗൺലോഡ് ചെയ്യാം.
• റിയാക്ട് പ്രോജക്റ്റ്: നിങ്ങൾക്ക് നിലവിലുള്ള ഒരു റിയാക്ട് പ്രോജക്റ്റ് ഉണ്ടായിരിക്കണം അല്ലെങ്കിൽ ക്രിയേറ്റ് റിയാക്ട് ആപ്പ് അല്ലെങ്കിൽ സമാനമായ ടൂൾ ഉപയോഗിച്ച് പുതിയൊരെണ്ണം ഉണ്ടാക്കുക.

ഇൻസ്റ്റാളേഷൻ

npm അല്ലെങ്കിൽ yarn ഉപയോഗിച്ച് താഴെ പറയുന്ന പാക്കേജുകൾ ഇൻസ്റ്റാൾ ചെയ്യുക:

            npm install --save-dev @testing-library/react @testing-library/jest-dom jest babel-jest @babel/preset-env @babel/preset-react

            

              
                Copy
              
            
          

അല്ലെങ്കിൽ, yarn ഉപയോഗിച്ച്:

            yarn add --dev @testing-library/react @testing-library/jest-dom jest babel-jest @babel/preset-env @babel/preset-react

            

              
                Copy
              
            
          

പാക്കേജുകളുടെ വിശദീകരണം:

• @testing-library/react: റിയാക്ട് കമ്പോണന്റുകൾ ടെസ്റ്റ് ചെയ്യുന്നതിനുള്ള പ്രധാന ലൈബ്രറി.
• @testing-library/jest-dom: DOM നോഡുകളെക്കുറിച്ച് ഉറപ്പുവരുത്തുന്നതിനായി കസ്റ്റം ജസ്റ്റ് മാച്ചറുകൾ നൽകുന്നു.
• Jest: ഒരു ജനപ്രിയ ജാവാസ്ക്രിപ്റ്റ് ടെസ്റ്റിംഗ് ഫ്രെയിംവർക്ക്.
• babel-jest: നിങ്ങളുടെ കോഡ് കംപൈൽ ചെയ്യാൻ ബേബൽ ഉപയോഗിക്കുന്ന ഒരു ജസ്റ്റ് ട്രാൻസ്ഫോർമർ.
• @babel/preset-env: നിങ്ങളുടെ ടാർഗെറ്റ് എൻവയോൺമെൻ്റുകളെ പിന്തുണയ്ക്കുന്നതിന് ആവശ്യമായ ബേബൽ പ്ലഗിനുകളും പ്രീസെറ്റുകളും നിർണ്ണയിക്കുന്ന ഒരു ബേബൽ പ്രീസെറ്റ്.
• @babel/preset-react: റിയാക്ടിനായുള്ള ഒരു ബേബൽ പ്രീസെറ്റ്.

കോൺഫിഗറേഷൻ

നിങ്ങളുടെ പ്രോജക്റ്റിൻ്റെ റൂട്ടിൽ താഴെ പറയുന്ന ഉള്ളടക്കത്തോടുകൂടി ഒരു `babel.config.js` ഫയൽ ഉണ്ടാക്കുക:

            module.exports = {
  presets: ['@babel/preset-env', '@babel/preset-react'],
};

            

              
                Copy
              
            
          

ഒരു ടെസ്റ്റ് സ്ക്രിപ്റ്റ് ഉൾപ്പെടുത്താൻ നിങ്ങളുടെ `package.json` ഫയൽ അപ്ഡേറ്റ് ചെയ്യുക:

            {
  "scripts": {
    "test": "jest"
  }
}

            

              
                Copy
              
            
          

ജസ്റ്റ് കോൺഫിഗർ ചെയ്യുന്നതിനായി നിങ്ങളുടെ പ്രോജക്റ്റിൻ്റെ റൂട്ടിൽ ഒരു `jest.config.js` ഫയൽ ഉണ്ടാക്കുക. ഒരു മിനിമൽ കോൺഫിഗറേഷൻ ഇങ്ങനെയായിരിക്കാം:

            module.exports = {
  testEnvironment: 'jsdom',
  setupFilesAfterEnv: ['/src/setupTests.js'],
};

            

              
                Copy
              
            
          

താഴെ പറയുന്ന ഉള്ളടക്കത്തോടുകൂടി ഒരു `src/setupTests.js` ഫയൽ ഉണ്ടാക്കുക. ഇത് നിങ്ങളുടെ എല്ലാ ടെസ്റ്റുകളിലും ജസ്റ്റ് DOM മാച്ചറുകൾ ലഭ്യമാണെന്ന് ഉറപ്പാക്കുന്നു:

            import '@testing-library/jest-dom/extend-expect';

            

              
                Copy
              
            
          

നിങ്ങളുടെ ആദ്യത്തെ ടെസ്റ്റ് എഴുതുന്നു

ഒരു ലളിതമായ ഉദാഹരണം ഉപയോഗിച്ച് നമുക്ക് തുടങ്ങാം. ഒരു ആശംസാ സന്ദേശം കാണിക്കുന്ന ഒരു റിയാക്ട് കമ്പോണന്റ് നിങ്ങൾക്കുണ്ടെന്ന് കരുതുക:

            // src/components/Greeting.js
import React from 'react';

function Greeting({ name }) {
  return <h1>Hello, {name}!</h1>;
}

export default Greeting;

            

              
                Copy
              
            
          

ഇനി, ഈ കമ്പോണന്റിനായി ഒരു ടെസ്റ്റ് എഴുതാം:

            // src/components/Greeting.test.js
import React from 'react';
import { render, screen } from '@testing-library/react';
import Greeting from './Greeting';

test('renders a greeting message', () => {
  render(<Greeting name="World" />);
  const greetingElement = screen.getByText(/Hello, World!/i);
  expect(greetingElement).toBeInTheDocument();
});

            

              
                Copy
              
            
          

വിശദീകരണം:

• `render`: ഈ ഫംഗ്ഷൻ കമ്പോണന്റിനെ DOM-ലേക്ക് റെൻഡർ ചെയ്യുന്നു.
• `screen`: ഈ ഒബ്ജക്റ്റ് DOM-ൽ നിന്ന് വിവരങ്ങൾ ചോദിക്കുന്നതിനുള്ള രീതികൾ നൽകുന്നു.
• `getByText`: ഈ രീതി ഒരു എലമെന്റിനെ അതിൻ്റെ ടെക്സ്റ്റ് ഉള്ളടക്കം ഉപയോഗിച്ച് കണ്ടെത്തുന്നു. `/i` ഫ്ലാഗ് തിരയൽ കേസ്-ഇൻസെൻസിറ്റീവ് ആക്കുന്നു.
• `expect`: കമ്പോണന്റിന്റെ സ്വഭാവത്തെക്കുറിച്ച് ഉറപ്പുവരുത്താൻ ഈ ഫംഗ്ഷൻ ഉപയോഗിക്കുന്നു.
• `toBeInTheDocument`: ഈ മാച്ചർ എലമെൻ്റ് DOM-ൽ ഉണ്ടെന്ന് ഉറപ്പുവരുത്തുന്നു.

ടെസ്റ്റ് പ്രവർത്തിപ്പിക്കുന്നതിന്, നിങ്ങളുടെ ടെർമിനലിൽ താഴെ പറയുന്ന കമാൻഡ് എക്സിക്യൂട്ട് ചെയ്യുക:

            npm test

            

              
                Copy
              
            
          

എല്ലാം ശരിയായി കോൺഫിഗർ ചെയ്തിട്ടുണ്ടെങ്കിൽ, ടെസ്റ്റ് പാസാകും.

സാധാരണ RTL ക്വറികൾ

DOM-ൽ എലമെന്റുകൾ കണ്ടെത്തുന്നതിന് RTL വിവിധ ക്വറി രീതികൾ നൽകുന്നു. ഉപയോക്താക്കൾ നിങ്ങളുടെ ആപ്ലിക്കേഷനുമായി എങ്ങനെ ഇടപഴകുന്നു എന്ന് അനുകരിക്കാനാണ് ഈ ക്വറികൾ രൂപകൽപ്പന ചെയ്തിരിക്കുന്നത്.

`getByRole`

ഈ ക്വറി ഒരു എലമെന്റിനെ അതിൻ്റെ ARIA റോൾ ഉപയോഗിച്ച് കണ്ടെത്തുന്നു. സാധ്യമാകുമ്പോഴെല്ലാം `getByRole` ഉപയോഗിക്കുന്നത് ഒരു നല്ല പരിശീലനമാണ്, കാരണം ഇത് അക്സെസ്സിബിലിറ്റി പ്രോത്സാഹിപ്പിക്കുകയും നിങ്ങളുടെ ടെസ്റ്റുകൾ അടിസ്ഥാനപരമായ DOM ഘടനയിലെ മാറ്റങ്ങളെ പ്രതിരോധിക്കുന്നുവെന്ന് ഉറപ്പാക്കുകയും ചെയ്യുന്നു.

            <button role="button">Click me</button>

            

              
                Copy
              
            
          

            const buttonElement = screen.getByRole('button');
expect(buttonElement).toBeInTheDocument();

            

              
                Copy
              
            
          

`getByLabelText`

ഈ ക്വറി ഒരു എലമെന്റിനെ അതിനോട് ബന്ധപ്പെട്ട ലേബലിൻ്റെ ടെക്സ്റ്റ് ഉപയോഗിച്ച് കണ്ടെത്തുന്നു. ഫോം എലമെന്റുകൾ ടെസ്റ്റ് ചെയ്യുന്നതിന് ഇത് ഉപയോഗപ്രദമാണ്.

            <label htmlFor="name">Name:</label>
<input type="text" id="name" />

            

              
                Copy
              
            
          

            const nameInputElement = screen.getByLabelText('Name:');
expect(nameInputElement).toBeInTheDocument();

            

              
                Copy
              
            
          

`getByPlaceholderText`

ഈ ക്വറി ഒരു എലമെന്റിനെ അതിൻ്റെ പ്ലേസ്ഹോൾഡർ ടെക്സ്റ്റ് ഉപയോഗിച്ച് കണ്ടെത്തുന്നു.

            <input type="text" placeholder="Enter your email" />

            

              
                Copy
              
            
          

            const emailInputElement = screen.getByPlaceholderText('Enter your email');
expect(emailInputElement).toBeInTheDocument();

            

              
                Copy
              
            
          

`getByAltText`

ഈ ക്വറി ഒരു ഇമേജ് എലമെന്റിനെ അതിൻ്റെ ആൾട്ട് ടെക്സ്റ്റ് ഉപയോഗിച്ച് കണ്ടെത്തുന്നു. അക്സെസ്സിബിലിറ്റി ഉറപ്പാക്കാൻ എല്ലാ ചിത്രങ്ങൾക്കും അർത്ഥവത്തായ ആൾട്ട് ടെക്സ്റ്റ് നൽകേണ്ടത് പ്രധാനമാണ്.

            <img src="logo.png" alt="Company Logo" />

            

              
                Copy
              
            
          

            const logoImageElement = screen.getByAltText('Company Logo');
expect(logoImageElement).toBeInTheDocument();

            

              
                Copy
              
            
          

`getByTitle`

ഈ ക്വറി ഒരു എലമെന്റിനെ അതിൻ്റെ ടൈറ്റിൽ ആട്രിബ്യൂട്ട് ഉപയോഗിച്ച് കണ്ടെത്തുന്നു.

            <span title="Close">X</span>

            

              
                Copy
              
            
          

            const closeElement = screen.getByTitle('Close');
expect(closeElement).toBeInTheDocument();

            

              
                Copy
              
            
          

`getByDisplayValue`

ഈ ക്വറി ഒരു എലമെന്റിനെ അതിൻ്റെ ഡിസ്പ്ലേ വാല്യൂ ഉപയോഗിച്ച് കണ്ടെത്തുന്നു. മുൻകൂട്ടി പൂരിപ്പിച്ച മൂല്യങ്ങളുള്ള ഫോം ഇൻപുട്ടുകൾ ടെസ്റ്റ് ചെയ്യുന്നതിന് ഇത് ഉപയോഗപ്രദമാണ്.

            <input type="text" value="Initial Value" />

            

              
                Copy
              
            
          

            const inputElement = screen.getByDisplayValue('Initial Value');
expect(inputElement).toBeInTheDocument();

            

              
                Copy
              
            
          

`getAllBy*` ക്വറികൾ

`getBy*` ക്വറികൾക്ക് പുറമെ, RTL `getAllBy*` ക്വറികളും നൽകുന്നു, ഇത് പൊരുത്തപ്പെടുന്ന എലമെന്റുകളുടെ ഒരു അറേ നൽകുന്നു. ഒരേ സ്വഭാവസവിശേഷതകളുള്ള ഒന്നിലധികം എലമെന്റുകൾ DOM-ൽ ഉണ്ടെന്ന് ഉറപ്പുവരുത്തേണ്ടിവരുമ്പോൾ ഇത് ഉപയോഗപ്രദമാണ്.

            <li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>

            

              
                Copy
              
            
          

            const listItems = screen.getAllByRole('listitem');
expect(listItems).toHaveLength(3);

            

              
                Copy
              
            
          

`queryBy*` ക്വറികൾ

`queryBy*` ക്വറികൾ `getBy*` ക്വറികൾക്ക് സമാനമാണ്, എന്നാൽ ഒരു പിശക് നൽകുന്നതിനുപകരം, പൊരുത്തപ്പെടുന്ന എലമെൻ്റ് കണ്ടെത്തിയില്ലെങ്കിൽ അവ `null` നൽകുന്നു. DOM-ൽ ഒരു എലമെൻ്റ് ഇല്ലെന്ന് ഉറപ്പുവരുത്താൻ നിങ്ങൾ ആഗ്രഹിക്കുമ്പോൾ ഇത് ഉപയോഗപ്രദമാണ്.

            const missingElement = screen.queryByText('Non-existent text');
expect(missingElement).toBeNull();

            

              
                Copy
              
            
          

`findBy*` ക്വറികൾ

`findBy*` ക്വറികൾ `getBy*` ക്വറികളുടെ അസിൻക്രണസ് പതിപ്പുകളാണ്. പൊരുത്തപ്പെടുന്ന എലമെൻ്റ് കണ്ടെത്തുമ്പോൾ പരിഹരിക്കപ്പെടുന്ന ഒരു പ്രോമിസ് അവ നൽകുന്നു. ഒരു API-ൽ നിന്ന് ഡാറ്റ ലഭ്യമാക്കുന്നത് പോലുള്ള അസിൻക്രണസ് പ്രവർത്തനങ്ങൾ ടെസ്റ്റ് ചെയ്യുന്നതിന് ഇത് ഉപയോഗപ്രദമാണ്.

            // Simulating an asynchronous data fetch
const fetchData = () => new Promise(resolve => {
  setTimeout(() => resolve('Data Loaded!'), 1000);
});

function MyComponent() {
  const [data, setData] = React.useState(null);

  React.useEffect(() => {
    fetchData().then(setData);
  }, []);

  return <div>{data}</div>;
}

            

              
                Copy
              
            
          

            test('loads data asynchronously', async () => {
  render(<MyComponent />);
  const dataElement = await screen.findByText('Data Loaded!');
  expect(dataElement).toBeInTheDocument();
});

            

              
                Copy
              
            
          

ഉപയോക്തൃ ഇടപെടലുകൾ അനുകരിക്കുന്നു

ബട്ടണുകൾ ക്ലിക്കുചെയ്യുക, ഇൻപുട്ട് ഫീൽഡുകളിൽ ടൈപ്പുചെയ്യുക, ഫോമുകൾ സമർപ്പിക്കുക തുടങ്ങിയ ഉപയോക്തൃ ഇടപെടലുകൾ അനുകരിക്കുന്നതിനായി RTL `fireEvent`, `userEvent` API-കൾ നൽകുന്നു.

`fireEvent`

`fireEvent` നിങ്ങളെ പ്രോഗ്രമാറ്റിക്കായി DOM ഇവൻ്റുകൾ ട്രിഗർ ചെയ്യാൻ അനുവദിക്കുന്നു. ഇത് ഒരു ലോ-ലെവൽ API ആണ്, ഇത് ഫയർ ചെയ്യുന്ന ഇവൻ്റുകളിൽ നിങ്ങൾക്ക് സൂക്ഷ്മമായ നിയന്ത്രണം നൽകുന്നു.

            <button onClick={() => alert('Button clicked!')}>Click me</button>

            

              
                Copy
              
            
          

            import { fireEvent } from '@testing-library/react';

test('simulates a button click', () => {
  const alertMock = jest.spyOn(window, 'alert').mockImplementation(() => {});
  render(<button onClick={() => alert('Button clicked!')}>Click me</button>);
  const buttonElement = screen.getByRole('button');
  fireEvent.click(buttonElement);
  expect(alertMock).toHaveBeenCalledTimes(1);
  alertMock.mockRestore();
});

            

              
                Copy
              
            
          

`userEvent`

`userEvent` എന്നത് ഉപയോക്തൃ ഇടപെടലുകളെ കൂടുതൽ യാഥാർത്ഥ്യബോധത്തോടെ അനുകരിക്കുന്ന ഒരു ഉയർന്ന തലത്തിലുള്ള API ആണ്. ഫോക്കസ് മാനേജ്മെൻ്റ്, ഇവൻ്റ് ഓർഡറിംഗ് തുടങ്ങിയ വിശദാംശങ്ങൾ ഇത് കൈകാര്യം ചെയ്യുന്നു, ഇത് നിങ്ങളുടെ ടെസ്റ്റുകളെ കൂടുതൽ കരുത്തുറ്റതും ബലഹീനത കുറഞ്ഞതുമാക്കുന്നു.

            <input type="text" onChange={e => console.log(e.target.value)} />

            

              
                Copy
              
            
          

            import userEvent from '@testing-library/user-event';

test('simulates typing in an input field', () => {
  const inputElement = screen.getByRole('textbox');
  userEvent.type(inputElement, 'Hello, world!');
  expect(inputElement).toHaveValue('Hello, world!');
});

            

              
                Copy
              
            
          

അസിൻക്രണസ് കോഡ് ടെസ്റ്റിംഗ്

പല റിയാക്ട് ആപ്ലിക്കേഷനുകളിലും ഒരു API-ൽ നിന്ന് ഡാറ്റ ലഭ്യമാക്കുന്നത് പോലുള്ള അസിൻക്രണസ് പ്രവർത്തനങ്ങൾ ഉൾപ്പെടുന്നു. അസിൻക്രണസ് കോഡ് ടെസ്റ്റ് ചെയ്യുന്നതിനായി RTL നിരവധി ടൂളുകൾ നൽകുന്നു.

`waitFor`

ഒരു ഉറപ്പ് നൽകുന്നതിന് മുമ്പ് ഒരു വ്യവസ്ഥ ശരിയാകുന്നതുവരെ കാത്തിരിക്കാൻ `waitFor` നിങ്ങളെ അനുവദിക്കുന്നു. പൂർത്തിയാകാൻ കുറച്ച് സമയമെടുക്കുന്ന അസിൻക്രണസ് പ്രവർത്തനങ്ങൾ ടെസ്റ്റ് ചെയ്യുന്നതിന് ഇത് ഉപയോഗപ്രദമാണ്.

            function MyComponent() {
  const [data, setData] = React.useState(null);

  React.useEffect(() => {
    setTimeout(() => {
      setData('Data loaded!');
    }, 1000);
  }, []);

  return <div>{data}</div>;
}

            

              
                Copy
              
            
          

            import { waitFor } from '@testing-library/react';

test('waits for data to load', async () => {
  render(<MyComponent />);
  await waitFor(() => screen.getByText('Data loaded!'));
  const dataElement = screen.getByText('Data loaded!');
  expect(dataElement).toBeInTheDocument();
});

            

              
                Copy
              
            
          

`findBy*` ക്വറികൾ

നേരത്തെ സൂചിപ്പിച്ചതുപോലെ, `findBy*` ക്വറികൾ അസിൻക്രണസ് ആണ്, പൊരുത്തപ്പെടുന്ന എലമെൻ്റ് കണ്ടെത്തുമ്പോൾ പരിഹരിക്കപ്പെടുന്ന ഒരു പ്രോമിസ് നൽകുന്നു. DOM-ൽ മാറ്റങ്ങൾ വരുത്തുന്ന അസിൻക്രണസ് പ്രവർത്തനങ്ങൾ ടെസ്റ്റ് ചെയ്യുന്നതിന് ഇത് ഉപയോഗപ്രദമാണ്.

ഹുക്കുകൾ ടെസ്റ്റിംഗ്

റിയാക്ട് ഹുക്കുകൾ സ്റ്റേറ്റ്ഫുൾ ലോജിക് ഉൾക്കൊള്ളുന്ന പുനരുപയോഗിക്കാവുന്ന ഫംഗ്ഷനുകളാണ്. കസ്റ്റം ഹുക്കുകൾ ഒറ്റയ്ക്ക് ടെസ്റ്റ് ചെയ്യുന്നതിനായി `@testing-library/react-hooks`-ൽ നിന്നുള്ള `renderHook` യൂട്ടിലിറ്റി RTL നൽകുന്നു (v17 മുതൽ ഇത് `@testing-library/react`-ൽ നേരിട്ട് ലഭ്യമാക്കിയതിനാൽ പഴയത് ഒഴിവാക്കി).

            // src/hooks/useCounter.js
import { useState } from 'react';

function useCounter(initialValue = 0) {
  const [count, setCount] = useState(initialValue);

  const increment = () => {
    setCount(prevCount => prevCount + 1);
  };

  const decrement = () => {
    setCount(prevCount => prevCount - 1);
  };

  return { count, increment, decrement };
}

export default useCounter;

            

              
                Copy
              
            
          

            // src/hooks/useCounter.test.js
import { renderHook, act } from '@testing-library/react';
import useCounter from './useCounter';

test('increments the counter', () => {
  const { result } = renderHook(() => useCounter());

  act(() => {
    result.current.increment();
  });

  expect(result.current.count).toBe(1);
});

            

              
                Copy
              
            
          

വിശദീകരണം:

• `renderHook`: ഈ ഫംഗ്ഷൻ ഹുക്കിനെ റെൻഡർ ചെയ്യുകയും ഹുക്കിൻ്റെ ഫലം അടങ്ങിയ ഒരു ഒബ്ജക്റ്റ് നൽകുകയും ചെയ്യുന്നു.
• `act`: സ്റ്റേറ്റ് അപ്‌ഡേറ്റുകൾക്ക് കാരണമാകുന്ന ഏതൊരു കോഡും പൊതിയാൻ ഈ ഫംഗ്ഷൻ ഉപയോഗിക്കുന്നു. ഇത് റിയാക്ടിന് അപ്‌ഡേറ്റുകൾ ശരിയായി ബാച്ച് ചെയ്യാനും പ്രോസസ്സ് ചെയ്യാനും കഴിയുമെന്ന് ഉറപ്പാക്കുന്നു.

അഡ്വാൻസ്ഡ് ടെസ്റ്റിംഗ് ടെക്നിക്കുകൾ

നിങ്ങൾ RTL-ൻ്റെ അടിസ്ഥാനകാര്യങ്ങൾ പഠിച്ചുകഴിഞ്ഞാൽ, നിങ്ങളുടെ ടെസ്റ്റുകളുടെ ഗുണനിലവാരവും പരിപാലനക്ഷമതയും മെച്ചപ്പെടുത്തുന്നതിന് കൂടുതൽ നൂതനമായ ടെസ്റ്റിംഗ് ടെക്നിക്കുകൾ പര്യവേക്ഷണം ചെയ്യാവുന്നതാണ്.

മൊഡ്യൂളുകൾ മോക്ക് ചെയ്യുന്നു

ചിലപ്പോൾ, നിങ്ങളുടെ കമ്പോണന്റുകളെ ഒറ്റപ്പെടുത്താനും ടെസ്റ്റിംഗ് സമയത്ത് അവയുടെ സ്വഭാവം നിയന്ത്രിക്കാനും ബാഹ്യ മൊഡ്യൂളുകളോ ഡിപൻഡൻസികളോ മോക്ക് ചെയ്യേണ്ടി വന്നേക്കാം. ഇതിനായി ജസ്റ്റ് ഒരു ശക്തമായ മോക്കിംഗ് API നൽകുന്നു.

            // src/api/dataService.js
export const fetchData = async () => {
  const response = await fetch('/api/data');
  const data = await response.json();
  return data;
};

            

              
                Copy
              
            
          

            // src/components/MyComponent.js
import React, { useState, useEffect } from 'react';
import { fetchData } from '../api/dataService';

function MyComponent() {
  const [data, setData] = useState(null);

  useEffect(() => {
    fetchData().then(setData);
  }, []);

  return <div>{data}</div>;
}

            

              
                Copy
              
            
          

            // src/components/MyComponent.test.js
import { render, screen, waitFor } from '@testing-library/react';
import MyComponent from './MyComponent';
import * as dataService from '../api/dataService';

jest.mock('../api/dataService');

test('fetches data from the API', async () => {
  dataService.fetchData.mockResolvedValue({ message: 'Mocked data!' });

  render(<MyComponent />);

  await waitFor(() => screen.getByText('Mocked data!'));

  expect(screen.getByText('Mocked data!')).toBeInTheDocument();
  expect(dataService.fetchData).toHaveBeenCalledTimes(1);
});

            

              
                Copy
              
            
          

വിശദീകരണം:

• `jest.mock('../api/dataService')`: ഈ വരി `dataService` മൊഡ്യൂളിനെ മോക്ക് ചെയ്യുന്നു.
• `dataService.fetchData.mockResolvedValue({ message: 'Mocked data!' })`: ഈ വരി മോക്ക് ചെയ്ത `fetchData` ഫംഗ്ഷനെ കോൺഫിഗർ ചെയ്യുന്നു, അത് നിർദ്ദിഷ്ട ഡാറ്റയുമായി പരിഹരിക്കുന്ന ഒരു പ്രോമിസ് നൽകുന്നു.
• `expect(dataService.fetchData).toHaveBeenCalledTimes(1)`: മോക്ക് ചെയ്ത `fetchData` ഫംഗ്ഷൻ ഒരു തവണ വിളിച്ചുവെന്ന് ഈ വരി ഉറപ്പുവരുത്തുന്നു.

കോൺടെക്സ്റ്റ് പ്രൊവൈഡറുകൾ

നിങ്ങളുടെ കമ്പോണന്റ് ഒരു കോൺടെക്സ്റ്റ് പ്രൊവൈഡറെ ആശ്രയിക്കുന്നുവെങ്കിൽ, ടെസ്റ്റിംഗ് സമയത്ത് നിങ്ങളുടെ കമ്പോണന്റിനെ പ്രൊവൈഡറിൽ പൊതിയേണ്ടിവരും. ഇത് കമ്പോണന്റിന് കോൺടെക്സ്റ്റ് മൂല്യങ്ങളിലേക്ക് പ്രവേശനം ഉണ്ടെന്ന് ഉറപ്പാക്കുന്നു.

            // src/contexts/ThemeContext.js
import React, { createContext, useState } from 'react';

export const ThemeContext = createContext();

export function ThemeProvider({ children }) {
  const [theme, setTheme] = useState('light');

  const toggleTheme = () => {
    setTheme(prevTheme => (prevTheme === 'light' ? 'dark' : 'light'));
  };

  return (
    <ThemeContext.Provider value={{ theme, toggleTheme }}>
      {children}
    </ThemeContext.Provider>
  );
}

            

              
                Copy
              
            
          

            // src/components/MyComponent.js
import React, { useContext } from 'react';
import { ThemeContext } from '../contexts/ThemeContext';

function MyComponent() {
  const { theme, toggleTheme } = useContext(ThemeContext);

  return (
    <div style={{ backgroundColor: theme === 'light' ? '#fff' : '#000', color: theme === 'light' ? '#000' : '#fff' }}>
      <p>Current theme: {theme}</p>
      <button onClick={toggleTheme}>Toggle Theme</button>
    </div>
  );
}

            

              
                Copy
              
            
          

            // src/components/MyComponent.test.js
import { render, screen, fireEvent } from '@testing-library/react';
import MyComponent from './MyComponent';
import { ThemeProvider } from '../contexts/ThemeContext';

test('toggles the theme', () => {
  render(
    <ThemeProvider>
      <MyComponent />
    </ThemeProvider>
  );

  const themeParagraph = screen.getByText(/Current theme: light/i);
  const toggleButton = screen.getByRole('button', { name: /Toggle Theme/i });

  expect(themeParagraph).toBeInTheDocument();

  fireEvent.click(toggleButton);

  expect(screen.getByText(/Current theme: dark/i)).toBeInTheDocument();
});

            

              
                Copy
              
            
          

വിശദീകരണം:

• ടെസ്റ്റിംഗ് സമയത്ത് ആവശ്യമായ കോൺടെക്സ്റ്റ് നൽകുന്നതിന് നമ്മൾ `MyComponent`-നെ `ThemeProvider`-ൽ പൊതിയുന്നു.

റൗട്ടർ ഉപയോഗിച്ച് ടെസ്റ്റിംഗ്

റിയാക്ട് റൗട്ടർ ഉപയോഗിക്കുന്ന കമ്പോണന്റുകൾ ടെസ്റ്റ് ചെയ്യുമ്പോൾ, നിങ്ങൾ ഒരു മോക്ക് റൗട്ടർ കോൺടെക്സ്റ്റ് നൽകേണ്ടിവരും. `react-router-dom`-ൽ നിന്നുള്ള `MemoryRouter` കമ്പോണന്റ് ഉപയോഗിച്ച് നിങ്ങൾക്ക് ഇത് നേടാനാകും.

            // src/components/MyComponent.js
import React from 'react';
import { Link } from 'react-router-dom';

function MyComponent() {
  return (
    <div>
      <Link to="/about">Go to About Page</Link>
    </div>
  );
}

            

              
                Copy
              
            
          

            // src/components/MyComponent.test.js
import { render, screen } from '@testing-library/react';
import { MemoryRouter } from 'react-router-dom';
import MyComponent from './MyComponent';

test('renders a link to the about page', () => {
  render(
    <MemoryRouter>
      <MyComponent />
    </MemoryRouter>
  );

  const linkElement = screen.getByRole('link', { name: /Go to About Page/i });
  expect(linkElement).toBeInTheDocument();
  expect(linkElement).toHaveAttribute('href', '/about');
});

            

              
                Copy
              
            
          

വിശദീകരണം:

• ഒരു മോക്ക് റൗട്ടർ കോൺടെക്സ്റ്റ് നൽകുന്നതിന് നമ്മൾ `MyComponent`-നെ `MemoryRouter`-ൽ പൊതിയുന്നു.
• ലിങ്ക് എലമെന്റിന് ശരിയായ `href` ആട്രിബ്യൂട്ട് ഉണ്ടെന്ന് നമ്മൾ ഉറപ്പുവരുത്തുന്നു.

ഫലപ്രദമായ ടെസ്റ്റുകൾ എഴുതുന്നതിനുള്ള മികച്ച രീതികൾ

RTL ഉപയോഗിച്ച് ടെസ്റ്റുകൾ എഴുതുമ്പോൾ പിന്തുടരേണ്ട ചില മികച്ച രീതികൾ ഇതാ:

• ഉപയോക്തൃ ഇടപെടലുകളിൽ ശ്രദ്ധ കേന്ദ്രീകരിക്കുക: ഉപയോക്താക്കൾ നിങ്ങളുടെ ആപ്ലിക്കേഷനുമായി എങ്ങനെ ഇടപഴകുന്നു എന്ന് അനുകരിക്കുന്ന ടെസ്റ്റുകൾ എഴുതുക.
• ഇമ്പ്ലിമെൻ്റേഷൻ വിശദാംശങ്ങൾ ടെസ്റ്റ് ചെയ്യുന്നത് ഒഴിവാക്കുക: നിങ്ങളുടെ കമ്പോണന്റുകളുടെ ആന്തരിക പ്രവർത്തനങ്ങൾ ടെസ്റ്റ് ചെയ്യരുത്. പകരം, നിരീക്ഷിക്കാവുന്ന സ്വഭാവത്തിൽ ശ്രദ്ധ കേന്ദ്രീകരിക്കുക.
• വ്യക്തവും സംക്ഷിപ്തവുമായ ടെസ്റ്റുകൾ എഴുതുക: നിങ്ങളുടെ ടെസ്റ്റുകൾ എളുപ്പത്തിൽ മനസ്സിലാക്കാനും പരിപാലിക്കാനും കഴിയുന്നതാക്കുക.
• അർത്ഥവത്തായ ടെസ്റ്റ് പേരുകൾ ഉപയോഗിക്കുക: ടെസ്റ്റ് ചെയ്യുന്ന സ്വഭാവത്തെ കൃത്യമായി വിവരിക്കുന്ന ടെസ്റ്റ് പേരുകൾ തിരഞ്ഞെടുക്കുക.
• ടെസ്റ്റുകൾ ഒറ്റയ്ക്ക് നിർത്തുക: ടെസ്റ്റുകൾക്കിടയിൽ ആശ്രിതത്വം ഒഴിവാക്കുക. ഓരോ ടെസ്റ്റും സ്വതന്ത്രവും സ്വയം ഉൾക്കൊള്ളുന്നതുമായിരിക്കണം.
• എഡ്ജ് കേസുകൾ ടെസ്റ്റ് ചെയ്യുക: നല്ല സാഹചര്യങ്ങൾ മാത്രം ടെസ്റ്റ് ചെയ്യരുത്. എഡ്ജ് കേസുകളും പിശകുകളും ടെസ്റ്റ് ചെയ്യുന്നുവെന്ന് ഉറപ്പാക്കുക.
• കോഡ് എഴുതുന്നതിന് മുമ്പ് ടെസ്റ്റുകൾ എഴുതുക: നിങ്ങളുടെ കോഡ് എഴുതുന്നതിന് മുമ്പ് ടെസ്റ്റുകൾ എഴുതാൻ ടെസ്റ്റ്-ഡ്രിവൺ ഡെവലപ്‌മെൻ്റ് (TDD) ഉപയോഗിക്കുന്നത് പരിഗണിക്കുക.
• "AAA" പാറ്റേൺ പിന്തുടരുക: അറേഞ്ച്, ആക്ട്, അസേർട്ട്. ഈ പാറ്റേൺ നിങ്ങളുടെ ടെസ്റ്റുകൾ ഘടനാപരമാക്കാനും അവയെ കൂടുതൽ വായിക്കാൻ എളുപ്പമുള്ളതാക്കാനും സഹായിക്കുന്നു.
• നിങ്ങളുടെ ടെസ്റ്റുകൾ വേഗത്തിലാക്കുക: വേഗത കുറഞ്ഞ ടെസ്റ്റുകൾ ഡെവലപ്പർമാരെ അവ പതിവായി പ്രവർത്തിപ്പിക്കുന്നതിൽ നിന്ന് നിരുത്സാഹപ്പെടുത്തും. നെറ്റ്‌വർക്ക് അഭ്യർത്ഥനകൾ മോക്ക് ചെയ്തും DOM മാനിപ്പുലേഷൻ്റെ അളവ് കുറച്ചും നിങ്ങളുടെ ടെസ്റ്റുകളുടെ വേഗത ഒപ്റ്റിമൈസ് ചെയ്യുക.
• വിവരണാത്മക പിശക് സന്ദേശങ്ങൾ ഉപയോഗിക്കുക: ഉറപ്പുകൾ പരാജയപ്പെടുമ്പോൾ, പരാജയത്തിൻ്റെ കാരണം വേഗത്തിൽ തിരിച്ചറിയാൻ പിശക് സന്ദേശങ്ങൾ മതിയായ വിവരങ്ങൾ നൽകണം.

ഉപസംഹാരം

നിങ്ങളുടെ റിയാക്ട് ആപ്ലിക്കേഷനുകൾക്കായി ഫലപ്രദവും, പരിപാലിക്കാൻ എളുപ്പമുള്ളതും, ഉപയോക്തൃ കേന്ദ്രീകൃതവുമായ ടെസ്റ്റുകൾ എഴുതുന്നതിനുള്ള ഒരു ശക്തമായ ഉപകരണമാണ് റിയാക്ട് ടെസ്റ്റിംഗ് ലൈബ്രറി. ഈ ഗൈഡിൽ പ്രതിപാദിച്ചിരിക്കുന്ന തത്വങ്ങളും സാങ്കേതിക വിദ്യകളും പിന്തുടരുന്നതിലൂടെ, നിങ്ങളുടെ ഉപയോക്താക്കളുടെ ആവശ്യങ്ങൾ നിറവേറ്റുന്ന ശക്തവും വിശ്വസനീയവുമായ ആപ്ലിക്കേഷനുകൾ നിങ്ങൾക്ക് നിർമ്മിക്കാൻ കഴിയും. ഉപയോക്താവിൻ്റെ കാഴ്ചപ്പാടിൽ നിന്ന് ടെസ്റ്റിംഗിൽ ശ്രദ്ധ കേന്ദ്രീകരിക്കാനും, ഇമ്പ്ലിമെൻ്റേഷൻ വിശദാംശങ്ങൾ ടെസ്റ്റ് ചെയ്യുന്നത് ഒഴിവാക്കാനും, വ്യക്തവും സംക്ഷിപ്തവുമായ ടെസ്റ്റുകൾ എഴുതാനും ഓർക്കുക. RTL സ്വീകരിക്കുന്നതിലൂടെയും മികച്ച രീതികൾ പിന്തുടരുന്നതിലൂടെയും, നിങ്ങളുടെ ലൊക്കേഷനോ നിങ്ങളുടെ ആഗോള പ്രേക്ഷകരുടെ പ്രത്യേക ആവശ്യകതകളോ പരിഗണിക്കാതെ, നിങ്ങളുടെ റിയാക്ട് പ്രോജക്റ്റുകളുടെ ഗുണനിലവാരവും പരിപാലനക്ഷമതയും ഗണ്യമായി മെച്ചപ്പെടുത്താൻ നിങ്ങൾക്ക് കഴിയും.